<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Javascript and HTML Thumbnail Image Scroller Example</title>

    <script type="text/javascript" src="thumbscroller.js"></script>
    <script type="text/javascript">
        //create an image scroller object
        var isFlowers;
        //delay all code execution untill after page load
        window.onload = loadMyScroller;
            function loadMyScroller() {
        
		        isFlowers = new ImageScroller("isFlowersFrame", "isFlowersImageRow");
		        //**    [begin] Modify these to change your images  **//
			    isFlowers.addThumbnail("images/flower_1_thmb.jpg", "images/flower_1_full.jpg", "Screen Shot 1", " Screen Shot 1 Description.");
			    isFlowers.addThumbnail("images/flower_2_thmb.jpg", "images/flower_2_full.jpg", "Screen Shot 2", " Screen Shot 2 Description.");
			    isFlowers.addThumbnail("images/flower_3_thmb.jpg", "images/flower_3_full.jpg", "Screen Shot 3", " Screen Shot 3 Description.");
			    isFlowers.addThumbnail("images/flower_4_thmb.jpg", "images/flower_4_full.jpg", "Screen Shot 4", " Screen Shot 4 Description.");
			    isFlowers.addThumbnail("images/flower_5_thmb.jpg", "images/flower_5_full.jpg", "Screen Shot 5", " Screen Shot 5 Description.");
			    isFlowers.addThumbnail("images/flower_6_thmb.jpg", "images/flower_6_full.jpg", "Screen Shot 6", " Screen Shot 6 Description.");
			    //**    [end]   Modify these to change your images  **//								
			    isFlowers.setThumbnailHeight(128);
			    isFlowers.setThumbnailWidth(96);
			    isFlowers.setThumbnailPadding(3);
			    isFlowers.setScrollType(0);
			    isFlowers.enableThumbBorder(false);
			    isFlowers.setClickOpenType(1);
			    isFlowers.setThumbsShown(3);
			    isFlowers.setNumOfImageToScroll(1);
			    isFlowers.renderScroller();
	        };
    </script>
</head>
<body>

    This is an example of how to load the thumbnail image scroller with all the code in the head section of the document.
    <table cellpadding="0" cellspacing="0">
        <tr valign="top">
            <td>
                <a id="isFlowersFirstButton" href="javascript:isFlowers.scrollBegin();">
                    <img src="first.gif" style="margin-top: 12px;
                        margin-right: 6px;" alt="See previous images" style="margin-top: 3px;" border="0" /></a>
            </td>
            <td>
                <a id="isFlowersPreviousButton" href="javascript:isFlowers.scrollReverse();">
                    <img src="rewind.gif" alt="See previous images"
                        style="margin-top: 3px;" border="0" /></a>
            </td>
            <td>
                <div id="isFlowersFrame" name="isFlowersFrame" style="margin: 0px; padding: 0px;
                    position: relative; overflow: hidden;">
                    <div id="isFlowersImageRow" name="isFlowersImageRow" style="position: absolute; top: 0px;
                        left: 0px;">
                    </div>
                </div>
            </td>
            <td>
                <a id="isFlowersNextButton" href="javascript:isFlowers.scrollForward();">
                    <img src="forward.gif" alt="See next images"
                        style="margin-top: 3px;" border="0" /></a>
            </td>
            <td>
                <a id="isFlowersLastButton" href="javascript:isFlowers.scrollEnd();">
                    <img src="last.gif" style="margin-top: 12px;
                        margin-left: 6px;" alt="See next images" style="margin-top: 3px;" border="0" /></a>
            </td>
        </tr>
    </table>
</body>
</html>
